<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D模型生产管理系统 - 数据库E-R图</title>
    <script src="https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 300;
        }
        
        .header p {
            margin: 10px 0 0 0;
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section h2 {
            color: #2c3e50;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .er-diagram {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            overflow-x: auto;
        }
        
        .table-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .table-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        
        .table-card h3 {
            color: #3498db;
            margin-top: 0;
            border-left: 4px solid #3498db;
            padding-left: 10px;
        }
        
        .field-list {
            list-style: none;
            padding: 0;
        }
        
        .field-list li {
            padding: 8px 0;
            border-bottom: 1px solid #f1f2f6;
            display: flex;
            justify-content: space-between;
        }
        
        .field-list li:last-child {
            border-bottom: none;
        }
        
        .field-name {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .field-type {
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        .key-indicator {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: 600;
            margin-left: 5px;
        }
        
        .pk {
            background: #e74c3c;
            color: white;
        }
        
        .fk {
            background: #f39c12;
            color: white;
        }
        
        .uk {
            background: #9b59b6;
            color: white;
        }
        
        .relationships {
            background: #ecf0f1;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .relationship-item {
            background: white;
            border-left: 4px solid #27ae60;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }
        
        .flow-chart {
            background: white;
            border: 2px solid #3498db;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .mermaid {
            text-align: center;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>3D模型生产管理系统</h1>
            <p>数据库实体关系图 (E-R图) 设计文档</p>
        </div>
        
        <div class="content">
            <!-- 系统统计 -->
            <div class="section">
                <h2>📊 系统概览</h2>
                <div class="stats">
                    <div class="stat-card">
                        <span class="stat-number">10</span>
                        <span class="stat-label">数据表</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">15</span>
                        <span class="stat-label">实体关系</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">5</span>
                        <span class="stat-label">核心业务流程</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">100%</span>
                        <span class="stat-label">数据完整性</span>
                    </div>
                </div>
            </div>
            
            <!-- E-R图 -->
            <div class="section">
                <h2>🗂️ 数据库E-R图</h2>
                <div class="er-diagram">
                    <div class="mermaid">
                        erDiagram
                            users ||--o{ orders : "用户下单"
                            users ||--o{ product_images : "上传图片"
                            
                            categories ||--o{ products : "分类包含"
                            products ||--o{ product_images : "商品图片"
                            products ||--o{ orders : "商品订单"
                            products ||--o{ 3d_models : "3D模型"
                            
                            product_images ||--o{ 3d_models : "生成模型"
                            3d_models ||--o{ orders : "模型订单"
                            3d_models ||--o{ model_3d_processing : "处理记录"
                            
                            orders ||--o{ production_jobs : "生产任务"
                            manufacturers ||--o{ production_jobs : "承接任务"
                            
                            users {
                                int id PK
                                string email UK
                                string username UK
                                string hashed_password
                                string full_name
                                string phone
                                string role
                                boolean is_active
                                string avatar_url
                                datetime created_at
                                datetime updated_at
                            }
                            
                            categories {
                                int id PK
                                string name
                                string description
                                string image_url
                                int sort_order
                                boolean is_active
                                datetime created_at
                                datetime updated_at
                            }
                            
                            products {
                                int id PK
                                string name
                                string description
                                decimal price
                                int category_id FK
                                string shopify_product_id
                                string template_3d_url
                                string default_material
                                boolean is_active
                                int stock_quantity
                                datetime created_at
                                datetime updated_at
                            }
                            
                            product_images {
                                int id PK
                                int product_id FK
                                int uploader_id FK
                                string original_filename
                                string file_url
                                int file_size
                                string mime_type
                                int width
                                int height
                                boolean is_primary
                                datetime created_at
                            }
                            
                            3d_models {
                                int id PK
                                int product_id FK
                                int source_image_id FK
                                string model_file_url
                                string preview_image_url
                                string file_format
                                int file_size
                                string status
                                boolean is_validated
                                boolean is_optimized
                                int version
                                datetime created_at
                                datetime updated_at
                            }
                            
                            orders {
                                int id PK
                                string order_number UK
                                int user_id FK
                                int product_id FK
                                int model_3d_id FK
                                int quantity
                                decimal unit_price
                                decimal total_amount
                                string status
                                string payment_status
                                string shipping_address
                                string shipping_name
                                string shipping_phone
                                datetime created_at
                                datetime paid_at
                                datetime shipped_at
                                datetime delivered_at
                            }
                            
                            production_jobs {
                                int id PK
                                string job_number UK
                                int order_id FK
                                int manufacturer_id FK
                                string production_file_url
                                string file_format
                                string material_specification
                                int quantity
                                string status
                                int progress_percentage
                                datetime created_at
                                datetime updated_at
                            }
                            
                            manufacturers {
                                int id PK
                                string company_name
                                string contact_person
                                string email
                                string phone
                                string address
                                string supported_materials
                                int max_production_capacity
                                int production_lead_time
                                boolean is_active
                                decimal rating
                                datetime created_at
                                datetime updated_at
                            }
                            
                            model_3d_processing {
                                int id PK
                                int model_id FK
                                string processing_type
                                string original_filename
                                string file_path
                                int file_size
                                string file_format
                                string status
                                int progress
                                datetime created_at
                            }
                            
                            system_configs {
                                int id PK
                                string config_key UK
                                string config_value
                                string description
                                string config_type
                                boolean is_sensitive
                                datetime created_at
                                datetime updated_at
                            }
                    </div>
                </div>
            </div>
            
            <!-- 核心表结构 -->
            <div class="section">
                <h2>📋 核心表结构详情</h2>
                <div class="table-info">
                    <div class="table-card">
                        <h3>👤 用户表 (users)</h3>
                        <ul class="field-list">
                            <li><span class="field-name">id</span><span class="key-indicator pk">PK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">email</span><span class="key-indicator uk">UK</span><span class="field-type">VARCHAR(255)</span></li>
                            <li><span class="field-name">username</span><span class="key-indicator uk">UK</span><span class="field-type">VARCHAR(255)</span></li>
                            <li><span class="field-name">hashed_password</span><span class="field-type">VARCHAR(255)</span></li>
                            <li><span class="field-name">full_name</span><span class="field-type">VARCHAR(255)</span></li>
                            <li><span class="field-name">phone</span><span class="field-type">VARCHAR(20)</span></li>
                            <li><span class="field-name">role</span><span class="field-type">VARCHAR(20)</span></li>
                            <li><span class="field-name">is_active</span><span class="field-type">BOOLEAN</span></li>
                            <li><span class="field-name">created_at</span><span class="field-type">DATETIME</span></li>
                        </ul>
                    </div>
                    
                    <div class="table-card">
                        <h3>📦 订单表 (orders)</h3>
                        <ul class="field-list">
                            <li><span class="field-name">id</span><span class="key-indicator pk">PK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">order_number</span><span class="key-indicator uk">UK</span><span class="field-type">VARCHAR(100)</span></li>
                            <li><span class="field-name">user_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">product_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">model_3d_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">quantity</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">unit_price</span><span class="field-type">DECIMAL(10,2)</span></li>
                            <li><span class="field-name">total_amount</span><span class="field-type">DECIMAL(10,2)</span></li>
                            <li><span class="field-name">status</span><span class="field-type">VARCHAR(50)</span></li>
                            <li><span class="field-name">created_at</span><span class="field-type">DATETIME</span></li>
                        </ul>
                    </div>
                    
                    <div class="table-card">
                        <h3>🎨 商品图片表 (product_images)</h3>
                        <ul class="field-list">
                            <li><span class="field-name">id</span><span class="key-indicator pk">PK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">product_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">uploader_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">original_filename</span><span class="field-type">VARCHAR(255)</span></li>
                            <li><span class="field-name">file_url</span><span class="field-type">VARCHAR(500)</span></li>
                            <li><span class="field-name">file_size</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">width</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">height</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">is_primary</span><span class="field-type">BOOLEAN</span></li>
                        </ul>
                    </div>
                    
                    <div class="table-card">
                        <h3>🎯 3D模型表 (3d_models)</h3>
                        <ul class="field-list">
                            <li><span class="field-name">id</span><span class="key-indicator pk">PK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">product_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">source_image_id</span><span class="key-indicator fk">FK</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">model_file_url</span><span class="field-type">VARCHAR(500)</span></li>
                            <li><span class="field-name">preview_image_url</span><span class="field-type">VARCHAR(500)</span></li>
                            <li><span class="field-name">file_format</span><span class="field-type">VARCHAR(50)</span></li>
                            <li><span class="field-name">file_size</span><span class="field-type">INTEGER</span></li>
                            <li><span class="field-name">status</span><span class="field-type">VARCHAR(50)</span></li>
                            <li><span class="field-name">is_optimized</span><span class="field-type">BOOLEAN</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 关联关系说明 -->
            <div class="section">
                <h2>🔗 核心关联关系</h2>
                <div class="relationships">
                    <div class="relationship-item">
                        <h4>用户 → 订单 (一对多)</h4>
                        <p><strong>关系描述:</strong> 一个用户可以有多个订单</p>
                        <p><strong>外键:</strong> orders.user_id → users.id</p>
                        <p><strong>业务逻辑:</strong> 用户下单时创建订单记录，记录购买者信息</p>
                    </div>
                    
                    <div class="relationship-item">
                        <h4>商品图片 → 3D模型 (一对多)</h4>
                        <p><strong>关系描述:</strong> 一张图片可以生成多个3D模型</p>
                        <p><strong>外键:</strong> 3d_models.source_image_id → product_images.id</p>
                        <p><strong>业务逻辑:</strong> 3D模型基于商品图片生成，支持版本管理</p>
                    </div>
                    
                    <div class="relationship-item">
                        <h4>订单 → 生产任务 (一对多)</h4>
                        <p><strong>关系描述:</strong> 一个订单可以生成多个生产任务</p>
                        <p><strong>外键:</strong> production_jobs.order_id → orders.id</p>
                        <p><strong>业务逻辑:</strong> 订单确认后生成生产任务，分配给厂商生产</p>
                    </div>
                    
                    <div class="relationship-item">
                        <h4>厂商 → 生产任务 (一对多)</h4>
                        <p><strong>关系描述:</strong> 一个厂商可以承接多个生产任务</p>
                        <p><strong>外键:</strong> production_jobs.manufacturer_id → manufacturers.id</p>
                        <p><strong>业务逻辑:</strong> 生产任务分配给指定厂商，跟踪生产进度</p>
                    </div>
                </div>
            </div>
            
            <!-- 业务流程图 -->
            <div class="section">
                <h2>🔄 核心业务流程</h2>
                
                <div class="flow-chart">
                    <h3>用户下单完整流程</h3>
                    <div class="mermaid">
                        flowchart TD
                            A[用户注册/登录] --> B[选择商品]
                            B --> C[上传图片]
                            C --> D[生成3D模型]
                            D --> E[确认订单]
                            E --> F[支付]
                            F --> G[生成生产任务]
                            G --> H[分配厂商]
                            H --> I[生产]
                            I --> J[质检]
                            J --> K[发货]
                            K --> L[收货]
                    </div>
                </div>
                
                <div class="flow-chart">
                    <h3>3D模型生成流程</h3>
                    <div class="mermaid">
                        flowchart LR
                            A[上传图片] --> B[AI模型处理]
                            B --> C[3D模型生成]
                            C --> D[模型验证]
                            D --> E{验证通过?}
                            E -->|是| F[模型优化]
                            E -->|否| G[错误处理]
                            F --> H[完成]
                            G --> A
                    </div>
                </div>
                
                <div class="flow-chart">
                    <h3>生产任务分配流程</h3>
                    <div class="mermaid">
                        flowchart TD
                            A[订单确认] --> B[生成生产任务]
                            B --> C[评估厂商能力]
                            C --> D[选择合适厂商]
                            D --> E[分配任务]
                            E --> F[生产跟踪]
                            F --> G[进度更新]
                            G --> H[质检完成]
                    </div>
                </div>
            </div>
            
            <!-- 技术特性 -->
            <div class="section">
                <h2>⚙️ 技术特性</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #28a745;">
                        <h4 style="color: #28a745;">数据完整性</h4>
                        <ul>
                            <li>外键约束确保数据一致性</li>
                            <li>唯一性约束防止重复数据</li>
                            <li>默认值约束保证数据完整性</li>
                        </ul>
                    </div>
                    
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #17a2b8;">
                        <h4 style="color: #17a2b8;">性能优化</h4>
                        <ul>
                            <li>合理的索引设计</li>
                            <li>查询优化策略</li>
                            <li>数据归档机制</li>
                        </ul>
                    </div>
                    
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #ffc107;">
                        <h4 style="color: #e67e22;">扩展性设计</h4>
                        <ul>
                            <li>JSON扩展字段支持</li>
                            <li>版本控制机制</li>
                            <li>插件化架构</li>
                        </ul>
                    </div>
                    
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #6f42c1;">
                        <h4 style="color: #6f42c1;">安全保障</h4>
                        <ul>
                            <li>敏感信息加密存储</li>
                            <li>数据脱敏展示</li>
                            <li>定期备份策略</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            themeVariables: {
                primaryColor: '#3498db',
                primaryTextColor: '#2c3e50',
                primaryBorderColor: '#2980b9',
                lineColor: '#7f8c8d',
                secondaryColor: '#ecf0f1',
                tertiaryColor: '#f8f9fa',
                background: '#ffffff',
                mainBkg: '#ffffff',
                secondBkg: '#f8f9fa',
                tertiaryBkg: '#ecf0f1'
            },
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            er: {
                diagramPadding: 20,
                layoutDirection: 'TB',
                minEntityWidth: 100,
                minEntityHeight: 75,
                entityPadding: 15,
                stroke: 'solid',
                fill: '#ffffff'
            }
        });
    </script>
</body>
</html>